<template>
  <div class="w-100">
    <div class="mb-3" v-for="(item,index) in dataList" :key="index">
      <div class="titleClass mb-2">{{"数据"+item.seq}}</div>
      <el-button type="primary" size="mini" @click="openCheckDataDialog(index)">添加数据{{item.seq}}</el-button>
      <el-table
        :data="item.mapString1"
        border
        style="width: 100%;"
        class="mt-2"
      >
        <el-table-column type="index" label="序号" width="50" align="center"/>
        <el-table-column prop="dataValue" label="数据值" align="center"/>
        <el-table-column prop="dataValueName" label="数据值名称" align="center"/>
        <el-table-column prop="tagName" label="区域标签" align="center"/>
        <el-table-column prop="deviceName" label="设备名称" align="center"/>
        <el-table-column prop="parameterName" label="元素标签" align="center"/>
        <el-table-column label="数据类型" align="center">
          <template slot-scope="{row}">
            {{row.dataType=="0"?"设备数据":row.dataType=="1"?"聚合数据":"自定义运行数据"}}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 选择数据 -->
    <yc-dialog ref="checkDataDialog" :dialogTitle="dialogTitle" :show-center="false" :modal="false" dialog-width="65%">
      <template #content>
        <instantiateTable :selectionOrRadio="2" ref="instantiateTable"></instantiateTable>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="checkDataSave">确定</el-button>
        <el-button @click="$refs.checkDataDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import instantiateTable from "@/views/dataManage/polymerizationData/instantiateTable.vue"

  export default {
    components: {
      ycDialog,
      instantiateTable
    },
    props: {
      dataList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        dialogTitle: "",
        addOrUpdateLoading: false
      }
    },
    watch: {
      dataList: {
        immediate: true, // 立即触发一次监听器，以便处理初始值
        handler(newVal) {
          if (Array.isArray(newVal) && newVal.length > 0) {
            for (let i = 0; i < newVal.length; i++) { // 修正循环条件
              let tempArr = []
              const item = newVal[i]

              if (item.key) {
                // 创建一个新的对象来存储需要的信息
                const newItem = {
                  dataValue: item.dataValue,
                  dataValueName: item.dataValueName,
                  tagName: item.tagName,
                  deviceName: item.deviceName,
                  parameterName: item.parameterName,
                  dataType: item.dataType,
                  messages: item.key
                }

                // 添加到临时数组
                tempArr.push(newItem)
                item.mapString1 = tempArr
              }
            }
          } else {
            console.log("No items available.")
          }
        }
      }
    },
    created() {
    },
    methods: {
      // 添加数据
      openCheckDataDialog(index) {
        this.dialogTitle = "数据元查询"

        this.instantiationThreeIndex = index ? index : 0

        this.addOrUpdateLoading = false
        this.$refs.checkDataDialog.dialogVisible = true
      },
      // 选择弹窗数据
      checkDataSave() {
        this.addOrUpdateLoading = true

        this.$set(this.dataList[this.instantiationThreeIndex], "mapString1", [this.$refs.instantiateTable.selectedRow])

        this.$refs.checkDataDialog.dialogVisible = false
        this.addOrUpdateLoading = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  .titleClass {
    font-size: 16px;
    font-weight: 500;
    color: #000000;
  }
</style>
